---
title: Fluid DnD
head:
  - tag: title
    content: Fluid DnD 💦 Drag and Drop Library for svelte
description: "Official documentation for Fluid DnD, a fluid, agnostic and versatil drag and drop library for lists with current support for Vue 3, React and Svelte."
template: splash
hero:
  tagline: "<strong>Fluid DnD</strong> is a fluid and agnostic drag and drop solution for lists, full animated. With current support for Vue 3, React and Svelte."
  image:
    dark: ../../../assets/dark-logo.svg
    light: ../../../assets/logo.svg
  actions:
    - text: Read Docs
      link: /svelte/introduction/introduction/
      icon: right-arrow
      variant: primary
    - text: Examples
      link: /svelte/example/vertical-list/single-vertical-list/
      icon: right-arrow
      variant: secondary
    - text: Source Code
      link: https://github.com/carlosjorger/fluid-dnd
      icon: external
---

import { Card, CardGrid } from "@astrojs/starlight/components";

## Features

<CardGrid>
	<Card title="Easy and flexible" icon="pen">
		**Fluid DnD** is a library that was created with the intention of writing as little code as
		possible in order to use it and the same time can be used in many scenarios.
	</Card>
	<Card title="Clean and animated" icon="rocket">
		The drag and drop functionalities have a nice, clean and smooth animation compared to the rest
		of the libraries.
	</Card>
	<Card title="Fully Documented" icon="open-book">
		We’ve included a comprehensive set of documentation on **Fluid DnD** to help you take advance of
		this tool to add drag and drop functionalities to your projects.
	</Card>
</CardGrid>
